import styled from '@emotion/styled';
import { Form, Input } from 'antd';
import { t } from 'i18next';
import React from 'react';

const NormalTipsText = styled.p`
	padding: 4px;
	font-size: 13px;
	color: #c7c7c9;
`;

interface AgentNoInputProps {
	label?: string;
	placeholder?: string;
	name?: string;
	tips?: string;
	error?: string;
}

const AgentNoInput = (props: AgentNoInputProps) => {
	const { name, error = '', label = t('designated-transfer-agent'), tips = '* ' + t('transfer-normal-tips-text'), placeholder = t('input-agent-number') || '' } = props;

	return (
		<>
			<Form.Item label={label} name={name} className="form-input-item">
				<Input className="agent-no-input" name={name} placeholder={placeholder} bordered={false} />
			</Form.Item>
			{tips ? <NormalTipsText>{tips}</NormalTipsText> : null}
			{error ? <p className="transfer-error">{error}</p> : undefined}
		</>
	);
};

export default AgentNoInput;
